import React, { Component } from 'react';
// import styles from './styles.less';


class Pagination extends Component {

    state = {

    }

    handlePageNumberChange = (pageNumber) => {
        if(this.props.onChange){
            this.props.onChange({
                pageNumber,
                pageSize: this.props.pageSize,
            });
        }
    }

    handleChange = (params) => {
        const { pageNumber, pageSize } = { ...this.props, ...params};
        if(this.props.onChange){
            this.props.onChange({
                pageNumber,
                pageSize: pageSize,
            });
        }
    }
    handleKeyPress = (e) => {
        // 回车键
        if(e.key === 'Enter' || e.keyCode === 13) {
            if(this.state.inputValue){
                this.handleChange({ pageNumber: +this.state.inputValue });
            }
        }
    }
    render() { 
        const { pageNumber = 1, pageSize = 10, hasNext = true } = this.props;

        const beginIndex = (pageNumber - 1) * pageSize + 1;
        const endIndex = beginIndex + pageSize - 1;

        const paginationItemList = [];

        for(let i = Math.max(pageNumber - 3, 1); i< pageNumber; i++) {
            paginationItemList.push( <button className="item" onClick={()=>this.handlePageNumberChange(i)} key={`${i}`}>{i}</button> );
        }
        paginationItemList.push(<span className="item not-click" key={`${pageNumber}`}>{pageNumber}</span>);
        if(hasNext){
            for(let i = pageNumber + 1; i <= pageNumber+3; i++) {
                paginationItemList.push( <button className="item" onClick={()=>this.handlePageNumberChange(i)} key={`${i}`}>{i}</button> );
            }
        }


        return ( 
            <div className="pagination-wrap">
                { pageNumber !== 1 && 
                    <button className="item" onClick={()=>this.handlePageNumberChange(1)}>
                        1
                    </button>
                }
                { pageNumber > 1 && 
                    <button className="item" onClick={()=>this.handlePageNumberChange(pageNumber - 1)}>
                        前页
                    </button>
                }
                {paginationItemList}
                { hasNext && 
                    <button className="item" onClick={()=>this.handlePageNumberChange(pageNumber + 1)}>
                        后页
                    </button>
                }
                &nbsp;
                分页大小：
                <select value={`${pageSize}`} onChange={e=>this.handleChange({pageSize: +e.target.value})} >
                    <option value={10}>10</option>
                    <option value={20}>20</option>
                    <option value={30}>30</option>
                    <option value={40}>40</option>
                </select>
                跳转到：<input 
                        defaultValue={pageNumber}
                        type="number"
                        value={this.state.inputValue}
                        onChange={e => this.setState({inputValue: e.target.value})} 
                        onKeyPress={this.handleKeyPress}
                       />
                  [{beginIndex} - {endIndex} / {pageSize}]
            </div>
        );
    }
}
 
export default Pagination;